<template>
  <div class="main-topper">
    <div class="main-topper-shell">
      <a href="javascript:;" class="main-topper-search">
        <span>
          <i class="el-icon-search"></i>
          搜索
        </span>
      </a>
      <a href="javascript:;" class="main-topper-sort">
        <span>
          <i class="el-icon-sort"></i>
          排序
        </span>
      </a>
      <a href="javascript:;" class="main-topper-filter">
        <span>
          <i class="el-icon-s-operation"></i>
          筛选
        </span>
      </a>
      <a href="javascript:;" class="main-topper-setting">
        <span>
          <i class="el-icon-setting"></i>
          设置
        </span>
      </a>
      <a href="javascript:;" @click="addItem()" class="main-topper-edit">
        <span>
          <i class="el-icon-circle-plus"></i>
          添加
        </span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    addItem() {
      this.$store.state.contentBars.unshift({
        id: this.$store.state.contentBars.length,
        name: "329",
        info: [0, 0],
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/global";

.main-topper {
  position: sticky;
  top: 0;
  width: 100%;
  min-width: 875px;
  height: 35px;
  line-height: 35px;
  margin: 0 auto;
  padding: 20px 0;
  background-color: #fff;
  border-bottom: solid 1px $theme;
  z-index: 999;

  .main-topper-shell {
    margin: 0 auto;
    width: 825px;
    display: flex;
    justify-content: space-between;

    a {
      @include goodA;
      font-size: medium;

      span {
        padding-left: 5px;
      }
    }

    a:hover {
      font-weight: bolder;
    }
  }
}
</style>